<template>
  <view class="indexBox">
    <!-- 搜索 -->
    <!-- <view class="search">
      <u-search bgColor="#fff" placeholder="日照香炉生紫烟" inputAlign="center" :showAction="false" v-model="keyword">
      </u-search>
    </view> -->
    <!-- 1. 搜索模块 -->
    <ugo-search />
    <!-- 轮播图 -->
    <swiper class="banner" indicator-dots autoplay interval="1000" circular>
      <swiper-item v-for="item in bannerList" :key="index">
        <image :src="item.image_src" mode="scaleToFill" />
      </swiper-item>
    </swiper>
    <!-- 导航 -->
    <!-- 模块3：入口导航 -->
    <view class="nav">
      <!-- 补充：hover-class="none" 取消按下时灰色类名 -->
      <navigator url="/pages/category/category" open-type="switchTab" hover-class="none" v-for="item in navList"
        :key="item.name">
        <image :src="item.image_src" mode="scaleToFill" />
      </navigator>
    </view>

    <!-- 楼层 -->
    <!-- 楼层 -->
    <view class="floor-container">
      <view class="floor-item" v-for="(item, index) in floorList" :key="item.id">
        <view class="floor-title">
          <image :src="item.floor_title.image_src" mode="widthFix" />
        </view>
        <view class="floor-main">
          <navigator v-for="goods in item.product_list" :key="goods.name">
            <!-- <image :style="'width:' + goods.image_width + 'rpx'" :src="goods.image_src" mode="scaleToFill" /> -->
            <image :style="{ width: goods.image_width + 'rpx' }" :src="goods.image_src" mode="scaleToFill" />
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      keyword: '',
      bannerList: [],
      navList: [],
      floorList: []
    }
  },
  onLoad () {
    this.getBanner()
    this.getNav()
    this.getFloor()
  },
  onPullDownRefresh: function () {
    // Do something when pull down.
    // console.log('onPullDownRefresh');
    /* 
    实现下拉：刷新页面
    + 重新发送请求  发送3个
    */
    Promise.all([
      this.getBanner(),
      this.getNav(),
      this.getFloor()])
    //  结束下拉刷新
    uni.stopPullDownRefresh()
  },
  methods: {
    // 获取轮播图数据
    async getBanner () {
      // uni.request({
      //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      //   success: (res) => {
      //     console.log(res, 88);
      //     this.bannerList = res.data.message
      //   }
      // });
      // console.log(uni.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata' }), 9999);
      // const [error, res] = await uni.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata' });
      const res = await uni.$u.http.request({ url: '/home/swiperdata' });
      // console.log(res, 777);
      this.bannerList = res.data.message
    },
    // 获取导航
    async getNav () {
      const res = await uni.$u.http.request({ url: '/home/catitems' })
      this.navList = res.data.message
    },
    /* 楼层 */
    async getFloor () {
      const res = await uni.$u.http.request({ url: '/home/floordata' })
      // console.log(res, 888);
      this.floorList = res.data.message
    }
  }
}
</script>
<style lang='scss'  scoped>
.search {
  background: #ea4350;
  padding: 10rpx 25rpx;
}

/* 轮播图和图片宽高修改 */
.banner,
.banner image {
  width: 750rpx;
  height: 340rpx;
}

/* 导航图片 */
.nav {
  display: flex;
  justify-content: space-around;
  padding: 12rpx 0 42rpx;

  image {
    width: 128rpx;
    height: 140rpx;
  }
}

/* 楼层 */
.floor-container .floor-main {
  image {
    float: left;
    height: 188rpx;
    margin-left: 15rpx;
    margin-bottom: 10rpx;

  }

  navigator:nth-child(1) image {
    height: 386rpx;
  }
}
</style>